<template>
	<view class="container">
		<view class="home_top_bg">
			<view class="top_bgimg" :style="'height:' + topBarHeight + 'px;'">
				<view class="top_cont" :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px;'">
					<view style="display: flex" @click="clickBack">
						<uni-icons type="left" size="24" class="back"></uni-icons>
						<text class="title_">购物车</text>
					</view>
					<view class="edit" @click="edit = !edit">
						{{ edit ? '编辑' : '完成' }}
					</view>
				</view>
			</view>
		</view>

		<view class="top" :style="'margin-top:' + (topBarHeight + 10) + 'px'">
			<view class="line">
				<text class="label">客户名称：</text>
				<text class="value">{{ purchaserName }}</text>
			</view>
			<view class="line">
				<text class="label">客户编号：</text>
				<text class="value">{{ businessCode }}</text>
			</view>
		</view>

		<view class="title">
			<view class="left">
				<checkbox :checked="checkedAll" @click="changeChecked('all')"></checkbox>
				<text>商品详情</text>
			</view>
			<image src="./static/searchGoods.png" class="goodsAdd" @click="searchGoods()"></image>
		</view>

		<view class="goodsList" v-for="item in list">
			<view class="left">
				<checkbox :checked="item.checked" @click="updateChecked(item)"></checkbox>
			</view>
			<view class="right">
				<commodity :commodityObj="item.sku" :type="'cart'" @updatePrice="updatePrice" @updateNum="updateNum">
				</commodity>
			</view>
		</view>

		<view v-if="edit" class="bottom">
			<view class="label">
				<checkbox :checked="checkedAll" @click="changeChecked('all')"></checkbox>
				<text>合计：</text>
				<text>￥</text>
				<text>{{ totalPrice }}</text>
			</view>
			<view class="btn" @click="submit()">去结算</view>
		</view>

		<view v-else class="bottom">
			<view class="label">
				<checkbox :checked="checkedAll" @click="changeChecked('all')"></checkbox>
				<text>全选</text>
			</view>
			<view class="btn-del" @click="deleteGoods">删除</view>
		</view>

		<Dialog :dialog="dialog" :content="'确认提交订单吗？'" @cancel="dialog = false" @confirm="goSettle()"></Dialog>
	</view>
</template>

<script>
	import {
		getCarts,
		updatePrice,
		updateChecked,
		updateNum,
		deleteGoods
	} from '@/api/invoicer'
	import commodity from './components/commodity.vue'
	import Dialog from '@/components/dialog'

	export default {
		components: {
			commodity,
			Dialog
		},
		data() {
			return {
				topBarHeight: 0, //状态栏加导航栏高度
				stateBarHeight: 0, //导航栏高度
				tabBarHeight: 50, //状态栏高度
				edit: true,
				id: '',
				cartId: '',
				purchaserName: '',
				businessCode: '',
				list: [],
				totalPrice: '',
				checkedAll: false,
				checkedGoodsId: [],
				dialog: false
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			var self = this
			uni.getSystemInfo({
				success: function(res) {
					self.stateBarHeight = res.statusBarHeight
					// #ifdef MP-WEIXIN
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					let paddingSize = menuButtonInfo.top - self.stateBarHeight
					self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
					self.topBarHeight = menuButtonInfo.bottom + paddingSize
					// #endif
					// #ifndef MP
					self.topBarHeight = self.tabBarHeight + self.stateBarHeight
					// #endif
					// #ifdef MP-TOUTIAO
					self.stateBarHeight = 0
					self.topBarHeight = self.tabBarHeight
					// #endif
				}
			})
			this.list = []
			this.getCarts()
		},
		methods: {
			submit() {
				if (this.checkedGoodsId.length) {
					this.dialog = true
				}
			},
			getCarts() {
				getCarts(this.id).then(r => {
					if (r.code === 200) {
						this.purchaserName = r.data.purchaserName
						this.businessCode = r.data.businessCode
						this.list = r.data.skuList
						this.totalPrice = r.data.priceDetailDTO.flowPrice
						this.cartId = r.data.cartId
						this.setCommodityObj()
						this.calcChecked()
					}
				})
			},
			//商品数量改变
			updateNum(val) {

				updateNum({
					cartId: this.cartId,
					num: val.num,
					skuId: val.id
				}).then(res => {
					if (res.code !== 200) {
						this.list = []
					}
					this.getCarts()

					if (res.code == 200) {}
				})
			},
			//购物车改价
			updatePrice(val) {
				updatePrice({
					cartId: this.cartId,
					price: val.price,
					skuId: val.id
				}).then(res => {
					this.getCarts()

					if (res.code == 200) {}
				})
			},
			searchGoods() {
				uni.navigateTo({
					url: '/invoicer/search?type=goods&id=' + this.id
				})
			},
			clickBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goSettle() {
				uni.navigateTo({
					url: '/invoicer/preview?cartId=' + this.cartId
				})
				this.dialog = false
			},
			deleteGoods() {
				deleteGoods({
					cartId: this.cartId,
					skuIds: this.checkedGoodsId
				}).then(res => {
					if (res.code == 200) {
						this.getCarts()
						this.edit = true
					}
				})
				// this.checkedGoodsId
			},
			changeChecked(isChecked) {
				// e=all 全选   e=item 单个选中   isChecked 选中赋值
				if (isChecked == 'all') {
					this.checkedAll = !this.checkedAll
				}
				this.list.forEach(item => {
					item.checked = this.checkedAll
				})
			},
			updateChecked(val) {
				//更新单个选中状态
				updateChecked({
					cartId: this.cartId,
					skuId: val.sku.id,
					checked: !val.checked
				}).then(res => {
					if (res.code == 200) {
						this.getCarts()
					}
				})
			},
			//全选赋值
			calcChecked() {
				this.checkedGoodsId = []

				this.list.forEach(item => {
					if (item.checked) {
						this.checkedGoodsId.push(item.sku.id)
					}
				})

				if (this.checkedGoodsId.length && this.checkedGoodsId.length >= this.list.length) {
					this.checkedAll = true
				} else {
					this.checkedAll = false
				}
			},
			setCommodityObj() {
				this.list.forEach(item => {
					item.sku.num = item.num
					item.sku.cartPrice = item.price
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 130rpx;

		.home_top_bg {
			.top_bgimg {
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 200;
				color: black;
				background: #fff;
			}

			.top_cont {
				/* #ifdef MP */
				width: 70%;
				/* #endif */
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				background: #fff;

				.title_ {
					font-size: 33rpx;
				}

				.edit {
					/* #ifdef MP */
					font-size: 28rpx;
					/* #endif */
				}
			}
		}
	}

	.top {
		font-size: 29rpx;
		margin: 0 25rpx 20.83rpx;
		padding: 38.89rpx 0 34.03rpx;
		background: #ffffff;
		border-radius: 11rpx;

		.line {
			display: flex;
			line-height: 1;
			margin-left: 26.39rpx;
		}

		.line:nth-child(2) {
			margin-top: 29.86rpx;
		}

		.label {
			color: #8d8d8d;
			width: 160rpx;
		}

		.value {
			width: 70%;
		}
	}

	.title {
		height: 101rpx;
		background: #ffffff;
		border-radius: 11rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 25rpx 20.83rpx;

		.left {
			margin-left: 25rpx;
			font-size: 33rpx;
		}

		.goodsAdd {
			width: 43.06rpx;
			height: 43.06rpx;
			margin-right: 25rpx;
		}
	}

	.goodsList {
		display: flex;
		margin: 0 25rpx;
		margin-bottom: 20rpx;
		padding: 34rpx 25rpx;
		background: #ffffff;
		border-radius: 11rpx;

		.right {
			flex: 1;
		}
	}

	.bottom {
		width: 100%;
		height: 129rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;

		.label {
			margin-left: 50rpx;

			text:nth-child(2) {
				font-size: 33rpx;
			}

			text:nth-child(3) {
				font-size: 25rpx;
				color: #ef231b;
				line-height: 1;
				vertical-align: middle;
			}

			text:nth-child(4) {
				font-size: 42rpx;
				color: #ef231b;
				line-height: 1;
				vertical-align: text-bottom;
			}
		}

		.btn {
			width: 200rpx;
			height: 88rpx;
			font-size: 33rpx;
			line-height: 86rpx;
			text-align: center;
			color: #ffffff;
			background: #2871fc;
			border-radius: 44rpx;
			margin-right: 25rpx;
		}

		.btn-del {
			margin-right: 25rpx;
			padding: 18rpx 23rpx;
			border-radius: 39rpx;
			border: 1px solid #8d8d8d;
			font-size: 33rpx;
			color: #8d8d8d;
		}
	}
</style>